<template>
    <div class="box" :class="{ 'backgroudColor': !isBool }">
        <div class="centralSectionContent" :class="{ 'TextColor': !isBool }">
            <h1>Text</h1>
            <div class="hr"></div>
            <p>Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.</p>
            <h2>Headings</h2>
            <div class="hr"></div>
            <p>The following HTML <span>h1--h6</span> elements represent six levels of section headings. <span>h1</span> is
                the highest section level while <span>h6</span> is the lowest.</p>
            <h1>H1</h1>
            <div class="hr"></div>
            <h2>H2</h2>
            <div class="hr"></div>
            <h3>H3</h3>
            <h4>H4</h4>
            <h5>H5</h5>
            <h6>H6</h6>
            <h2>Paragraph</h2>
            <div class="hr"></div>
            <p class="shortEssay">
                {{ store.englishArticles }}
            </p>
            <h2>Images</h2>
            <div class="hr"></div>
            <div class="img">
                <img src="../assets/6.png" alt="">
            </div>
            <h2>Blockquotes</h2>
            <div class="hr"></div>
            <p>The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a <span>footer</span> or <span>cite</span> element, and optionally with in-line changes such as annotations and abbreviations.</p>
            <h2>Code &nbsp; Blocks</h2>
            <div class="hr"></div>
            <div class="imgtwo">
                <img src="../assets/7.png" alt="">
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { inject, provide, ref } from 'vue'
import { useCounterStore } from '../pinia/Pinia'
const router = useRouter()
const store = useCounterStore()
let isBool = inject('Bool')
</script>

<style lang="less" scoped>
.centralSectionContent {
    color: #24292f;
}

h6 {
    color: #24292f91;
}

.box {
    margin: 30px auto;
    background-color: #fff;
    border-radius: 1rem;
    width: 60vw;
    height: 180vh;

    .centralSectionContent {
        margin: auto;
        width: 55vw;
        height: 80vh;

        .img {
            width: 50vw;
            height: 48vh;
            margin: 20px auto;

            img {
                width: 100%;
                height: 100%;
            }
        }
        .imgtwo{
            margin-top: 20px;
            width: 55vw;
            height: 15vh;
            border-radius: 5px;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
            }
        }

        h1 {
            display: inline-block;
            font-weight: 600;
            font-size: 30px;
            margin-top: 20px;
            margin-bottom: 12px;
        }

        h2,
        h3,
        h4,
        h5,
        h6 {
            margin-top: 20px;
            margin-bottom: 16px;
            font-weight: 600;
            line-height: 1.25;
        }

        .shortEssay {
            line-height: 2;
        }

        p {
            margin-bottom: 10px;
            margin-top: 10px;
            font-size: 15px;

            span {
                background-color: rgba(175, 184, 193, 0.541);
                border-radius: 5px;
            }
        }

        .hr {
            border-bottom: 2px solid hsla(210, 18%, 87%, 1);
        }
    }
}

.backgroudColor {
    background-color: @changesubcolor;
}

.TextColor {
    color: white;
}</style>